<template>
    <li>
    	<ul style="overflow: hidden;">
    		<li>
		    	<span @click="showChild = !showChild" v-if="model.children" style="cursor: pointer; float: left;margin-right:5px;">
		    		<Icon v-if="showChild" type="android-arrow-dropdown" style="font-size: 20px;"></Icon>
		    		<Icon v-if="!showChild" type="android-arrow-dropright" style="font-size: 20px;"></Icon>
		    		<Icon type="ios-folder-outline"></Icon>
		    	</span>
				<span  v-if="!model.children">
		    		<Icon type="ios-paper-outline"></Icon>
		    	</span>
		        <Checkbox :label="model.id" v-model="watchCheckbox" :id="model.id" >
		            <span style="font-size: 14px;">{{model.title}}</span>
		        </Checkbox>
       		 </li>
        </ul>
	    <!--子级菜单-->
        <ul v-for="(item , index) in model.children" v-show="showChild" style="margin-left: 20px;" >
    		<permissionTree :model="item" :checkedPermissionList="checkedPermissionList" :key="index"></permissionTree>
    	</ul>
    </li>
</template>

<script>
export default {
	name: 'permissionTree',
	props: ["model", "checkedPermissionList"],
	data () {
	    return {
	    	showChild: false,
	    	watchCheckbox: false
	    };
	},
	watch: {
        'watchCheckbox' (curVal, oldVal) {
        	this.bus.$emit('checkedPermission', this.model.id, this.watchCheckbox);
        },
        'checkedPermissionList' (curVal, oldVal) {// 将选中的权限的watchCheckbox设置为true
        	if(curVal.indexOf(this.model.id) != -1){
        		this.watchCheckbox = true;
        	}else {
        		this.watchCheckbox = false;
        	}
        },
    },
	created(){
		
	},
	mounted() {
		document.getElementById(this.model.id).addEventListener("click", ()=>{
			this.bus.$emit('clickBox', this.model.id, this.watchCheckbox);
		});
	},
	methods: {
		
	}
}
</script>